<template>
  <div class="createorder">
    <!--  -->
    <div class="header">
      <van-icon name="arrow-left" class="headicon" @click="goSyy" />
      <div class="title">填写服务订单</div>
    </div>

    <statusbar item="10" />

    <van-cell class="cell">
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <div class="call">
          <van-image
            width="25"
            heigth="25"
            :src="h5ddxx.service.serviceImg"
          ></van-image>
          <span>{{ h5ddxx.service.serviceName }}</span>
        </div>
      </template>
      <template #default>
        <span>服务内容</span>
      </template>
    </van-cell>

    <van-cell-group>
      <van-cell>
        <template #title>
          <span>就诊医院</span>
        </template>

        <template #default>
          <!-- 底部弹出 -->
          <div class="texthui" @click="showHospitals = true">
            {{ form.hospital_name || "请选择就诊医院" }}
            <van-icon name="arrow" />
          </div>
        </template>
      </van-cell>
    </van-cell-group>

    <van-popup v-model:show="showHospitals" position="bottom">
      <van-picker :columns="columns" @confirm="onConfirm" @cancel="onCancel" />
    </van-popup>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import statusbar from "../../components/statusBar.vue";
import { h5Companion } from "../../api";
import { computed, onMounted, reactive, ref } from "vue";

const h5ddxx = reactive({
  companion: [],
  hospitals: [],
  service: {},
});

const form = reactive({});

onMounted(() => {
  h5Companion().then(({ data }) => {
    Object.assign(h5ddxx, data.data);
    // console.log(h5ddxx, "h5ddxx");
  });
});
const columns = computed(() => {
  return h5ddxx.hospitals.map((item) => {
    return { text: item.name, value: item.id };
  });
});
// imports and composables
const router = useRouter();
const goSyy = () => {
  router.go(-1);
};

const showHospitals = ref(false);

const onCancel = () => {
  showHospitals.value = false;
};

const onConfirm = (item) => {
  // console.log(item.selectedOptions[0].text);
  form.hospital_id = item.selectedOptions[0].value;
  form.hospital_name = item.selectedOptions[0].text;
  showHospitals.value = false;
};
</script>

<style lang="less" scoped>
.createorder {
  width: 100%;
  height: 100%;

  .header {
    position: relative;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

    .headicon {
      position: absolute;
      left: 15px;
      font-size: 18px;
      color: #333;
    }

    .title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
  }
}
.call {
  display: flex;
  align-items: center;
  span {
    margin-left: 10px;
  }
}
</style>